<template>
  <div class="app-container">
    <div class="search">
      <!-- 搜索表单 -->
      <el-form :model="searchForm" ref="formRef">
        <el-row>
          <el-col :span="6">
            <el-form-item label="模型名称">
              <el-input
                v-model="searchForm.productName"
                placeholder="请输入查询的模型名称"
                style="width: 200px"
                size="small"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="审核状态">
              <el-select
                v-model="searchForm.productState"
                placeholder="请选择"
                size="small"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="审核时间">
              <el-date-picker
                v-model="TimeValue"
                type="datetimerange"
                @change="handleChangeTime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                size="small"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--重置 搜搜按钮 -->
      <div class="btns">
        <el-button icon="Refresh" @click="handleResetClick">重置</el-button>
        <el-button type="primary" icon="Search" @click="handleQueryClick"
          >查询</el-button
        >
      </div>
    </div>

    <!-- 表单 -->
    <div class="content">
      <div class="content">
        <div class="table">
          <el-table
            :data="dataList"
            border
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column align="center" type="selection" width="50px" />
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="60px"
            />
            <el-table-column
              show-overflow-tooltip
              align="center"
              prop="productName"
              label="模型名称"
              width="300"
            />
            <el-table-column align="center" prop="dictName" label="产品类别" />

            <el-table-column
              align="center"
              prop="productState"
              label="审核状态"
              width="100"
            >
              <!-- 作用域插槽 -->
              <template #default="scope">
                <el-tag type="info" v-if="scope.row.productState === 0"
                  >草稿</el-tag
                >
                <el-tag type="info" v-else-if="scope.row.productState === 1"
                  >审核中</el-tag
                >
                <el-tag type="success" v-else-if="scope.row.productState === 2"
                  >审批通过</el-tag
                >
                <el-tag type="danger" v-else-if="scope.row.productState === 3"
                  >审核驳回</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="fileSize"
              label="文件大小"
              width="120"
            />
            <el-table-column
              align="center"
              prop="createAt"
              label="提交审批时间"
              width="200"
            >
              <template #default="scope">
                <!-- {{ formatDateTime(scope.row.commitTime) }} -->
                {{ scope.row.commitTime }}
              </template>
            </el-table-column>
            <!-- <el-table-column
              align="center"
              prop="updateAt"
              label="更新时间"
              width="200"
            >
              <template #default="scope">
                {{ scope.row.updateAt }}
              </template>
            </el-table-column> -->
            <el-table-column align="center" label="操作" width="200">
              <template #default="scope">
                <el-row>
                  <el-col :span="8"
                    ><el-button
                      size="small"
                      type="primary"
                      text
                      @click="handelOpenDetail(scope.row)"
                      >查看详情</el-button
                    ></el-col
                  >
                  <el-col :span="8">
                    <el-popconfirm
                      placement="bottom"
                      title="确认审批通过吗?"
                      width="200"
                      trigger="click"
                      @confirm="handelApproved(scope.row, 2)"
                    >
                      <template #reference>
                        <el-button
                          type="success"
                          size="small"
                          text
                          :disabled="
                            scope.row.productState === 3 ||
                            scope.row.productState === 2
                          "
                          >通过</el-button
                        >
                      </template>
                    </el-popconfirm></el-col
                  >
                  <el-col :span="8"
                    ><el-popconfirm
                      placement="bottom"
                      title="确认审批驳回吗?"
                      width="200"
                      trigger="click"
                      @confirm="handelApproved(scope.row, 3)"
                    >
                      <template #reference>
                        <el-button
                          type="danger"
                          size="small"
                          text
                          :disabled="
                            scope.row.productState === 3 ||
                            scope.row.productState === 2
                          "
                          >驳回</el-button
                        >
                      </template>
                    </el-popconfirm></el-col
                  >
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination" style="margin-top: 20px">
          <el-pagination
            :current-page="searchForm.page.current"
            :page-size="searchForm.page.size"
            :page-sizes="[10, 20, 30]"
            small
            layout="->,total,sizes, prev, pager, next, jumper"
            :total="listTotal"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 弹出框 -->
    <Dialog
      v-if="dialogVisible"
      :dialogVisible="true"
      :info="dialogInfo"
      @closeClick="closeClick"
      @refiladList="refiladList"
      :productState="productState"
    />
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import Dialog from "./cpns/dialog.vue";
import {
  queryBypageRequest,
  editByIdRequest,
  // getDeteilByIdRequest,
  queryProvince,
} from "@/api/buildlibrary";
import { formatDateTime } from "@/utils/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

const dataList = ref([]); //列表数据

const listTotal = ref(0);
const loading = ref(false);
const TimeValue = ref([]);
const searchForm = reactive({
  productName: "",
  page: {
    size: 10,
    current: 1,
  },
  productState: "",
  startTime: "",
  endTime: "",
});

onMounted(() => {
  getList();
});

// 获取数据
async function getList() {
  loading.value = true;
  const res = await queryBypageRequest(searchForm);
  dataList.value = res.data.list[0];
  listTotal.value = res.data.page.total;
  loading.value = false;
}
// 每页条数改变事件
function onSizeChange(val) {
  searchForm.page.size = val;
  getList();
}
// 页码改变事件
function onCurrentChange(val) {
  searchForm.page.current = val;
  getList();
}
function refiladList() {
  dialogVisible.value = false;
  getList();
}

//选项
const statusOptions = ref([
  // {
  //   value: 0,
  //   label: "草稿",
  // },
  {
    value: 1,
    label: "审核中",
  },
  {
    value: 2,
    label: "审核通过",
  },
  {
    value: 3,
    label: "审核驳回",
  },
]);

//重置按钮
function handleResetClick() {
  searchForm.productName = "";
  searchForm.page.current = 1;
  searchForm.productState = "";
  searchForm.startTime = "";
  searchForm.endTime = "";
  TimeValue.value = [];
  getList();
  console.log("reset");
}
//选择时间按钮
function handleChangeTime(e) {
  console.log(e);
  searchForm.startTime = e[0];
  searchForm.endTime = e[1];
}
//查询操作
function handleQueryClick() {
  searchForm.page.current = 1;
  console.log("ha.currentndleQueryClick", searchForm);
  getList();
}

// 查看详情
const dialogInfo = ref(null);
const productState = ref(null);
async function handelOpenDetail(row) {
  // console.log(row);
  // productState.value = row.productState;
  // dialogVisible.value = true;
  // console.log(row.id);
  // const res = await getDeteilByIdRequest(row.id);
  // dialogInfo.value = res.data;
  // console.log(res);

  router.push({
    path: "/buildlibrary/componentLibUpload",
    query: { id: row.id, view: 1 },
  });
}

//dilog回调
function closeClick(e) {
  dialogVisible.value = e;
}

//审核操作
async function handelApproved(e, status) {
  console.log(status);
  console.log(e.id);
  loading.value = true;
  //拒绝
  if (status === 3) {
    ElMessageBox.prompt("请输入驳回原因", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,

      inputErrorMessage: "拒绝原因不能为空",
    })
      .then(async ({ value }) => {
        const res = await editByIdRequest({
          id: e.id,
          productState: status,
          productAuditdescription: value,
        });
        if (res.code === 200) {
          ElMessage({
            showClose: true,
            message: "审批驳回操作成功",
            type: "success",
          });
          getList();

          loading.value = false;
        }
        console.log(res);
      })
      .catch(() => {});
  }
  //同意
  if (status === 2) {
    const res = await editByIdRequest({
      id: e.id,
      productState: status,
    });
    if (res.code === 200) {
      ElMessage({
        showClose: true,
        message: "审批通过操作成功",
        type: "success",
      });
      getList();
    }
    loading.value = false;
    console.log(res);
  }

  loading.value = false;
}

const dialogVisible = ref(false);
</script>
<style scoped>
label {
  font-weight: 0 !important;
}
.search {
  background-color: #fff;
  padding: 20px;
}
.search .btns {
  text-align: right;
  padding: 0 50px 10px 0;
}
</style>
